<template>
  <f7-page
    @page:reinit="getDataItems"
    infinite
    :infinite-distance="10"
    :infinite-preloader="showPreloader"
    @infinite="loadMore"
  >
    <f7-navbar title="待办流程" back-link="Back"></f7-navbar>
    <f7-list media-list>
      <f7-list-item
        swipeout
        v-for="item in items"
        v-bind:key="item.id"
        v-bind:title="item.title"
        v-bind:subtitle="item.businessNo"
        v-bind:text="item.startTime"
        v-bind:after="item.name"
        @swipeout:open="saveCurItem(item)">
        <f7-swipeout-actions right>
          <f7-swipeout-button close @click=" $refs.actionsOneGroup.open()">More</f7-swipeout-button>
        </f7-swipeout-actions>
      </f7-list-item>
    </f7-list>

    <f7-actions ref="actionsOneGroup" right>
      <f7-actions-group>
        <f7-actions-button  @click="checkDetail">查看</f7-actions-button>
        <f7-actions-button  @click="admitApplication">审批</f7-actions-button>
      </f7-actions-group>
      <f7-actions-group>
        <f7-actions-button color="red">Cancel</f7-actions-button>
      </f7-actions-group>
    </f7-actions>

  </f7-page>
</template>
<script>

export default {
  data () {
    return {
      items: [],
      pool:[],
      curItem:null,
      allowInfinite: true,
      showPreloader: false,
    }
  },
  created () {
    this.$f7ready((f7) => {
      let that = this;
      f7.request.setup({
        headers: {
          'AccessToken': sessionStorage.getItem('accessToken'),
          'JSESSIONID': sessionStorage.getItem('userToken')
        }
      });
      f7.request.json(that.GLOBAL.RequestAddress + '/camel/rest/workflow/tasks', {'page': 1, 'limit': 10, 'jsonStr': '', 'start':0}, function (result) {
        if (result.totalCount >=0) {
          that.items = result.data;
          if(that.items.length < 10) {
            that.showPreloader = false;
          }
        }
      })
    });

  },
  watch: {
    items: {
      handler(){

      },
      deep:true
    }
  },
  methods: {
    getDataItems: function(){
      console.log("init")
      let that = this;
      let app  = that.$f7;
      app.request.json(this.GLOBAL.RequestAddress + '/camel/rest/workflow/tasks', {'page': 1, 'limit': 10, 'jsonStr': '', 'start':0}, function (result) {
        if (result.totalCount >=0) {
          that.items = result.data;
        }
      })
    },
    saveCurItem:function (item) {
      this.curItem = item;
    },
    checkDetail:function () {
      let item = this.curItem;
      this.$f7router.navigate('/oa/personalwork/admit/' + item.businessKey.replace(':','/') + "/-1")
    },
    admitApplication: function () {
      let that = this;
      let item = that.curItem;
      let app = that.$f7;
      that.$f7router.navigate('/oa/personalwork/admit/' + item.businessKey.replace(':','/') + "/" + item.id)

    },
    showAlert: function (title, text) {
      let app = this.$7;
      app.dialog.alert(text, title, () => {
        //this.$f7router.back();
      });
    },
    loadMore() {
      const self = this;
      const app  = self.$f7;
      const length = self.items.length;

      if (!self.allowInfinite ) return;
      self.allowInfinite = false;

      setTimeout(() => {

        if (length >= 200 ||  length % 10 != 0 ) {
          self.showPreloader = false;
          return;
        }

        app.request.json(this.GLOBAL.RequestAddress + '/camel/rest/workflow/tasks', {'start':length, 'page':  Math.ceil(length/10 + 1), 'limit': 10, 'jsonStr': ''}, function (result) {
          if (result.totalCount >0) {
            self.pool = result.data;
            self.items = [...self.items, ...self.pool];
          }
          self.allowInfinite = true;
        })
      }, 1000);
    },
  },

}
</script>
